<template>
    <div class="cartItem">
        <div class="checkbox">
            <input type="checkbox" v-model="cartItem.onCart" @click="useCart.setOnCart(cartItem, !cartItem.onCart)">
        </div>
        <img :src="cartItem.img" alt="图片加载失败" class="cartImg">
        <div class="inf">
            <div class="title">{{ cartItem.name }}</div>
            <div class="title sub">{{ cartItem.french }}</div>
            <div class="msg">{{ cartItem.describe }}</div>
        </div>
        <div class="con">
            <div class="num">
                <button class="numBtn" @click="useCart.removeFromCart(cartItem)">-</button>
                <div>{{ cartItem.count }}</div>
                <button class="numBtn" @click="useCart.addToCart(cartItem)">+</button>
            </div>
            <div class="price">￥{{ cartItem.price }}</div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.cartItem {
    height: 200px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 30px;

    .cartImg {
        height: 170px;
        width: 170px;
    }

    .inf {
        .title {
            font-size: 20px;
            font-weight: 600;

            .sub {
                font-size: 15px;
                font-weight: 400;
            }
        }

        .msg {
            width: 300px;
            font-size: 15px;
            color: #b7b8b7;
        }
    }

    .con {
        margin-left: 20%;
        height: 100%;
        display: flex;
        gap: 30%;

        .num {
            display: flex;
            gap: 10px;

            .numBtn {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: 1px solid #000;
                background-color: #fff;
                cursor: pointer;
            }
        }
    }
}
</style>

<script setup>
import { useCartStore } from '@/stores/cart';
const useCart = useCartStore();
const props = defineProps({
    cartItem: {
        type: Object,
        default: () => ({})
    }
})
</script>